<template>
  <!-- 表头 -->
  <el-card class="box-show">
    <el-dialog title="新增单元" :visible="showDialog" @close="resetForm">
      <!-- 表单 -->
      <el-form ref="ruleForm" :model="ruleForm" status-icon :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="社区名称" prop="communityName">
          <!-- <el-input v-model="ruleForm.date" autocomplete="off" /> -->
          <el-select v-model="ruleForm.communityName" placeholder="请选择社区">
            <el-option
              v-for="task in taskList"
              :key="task.communityId"
              :label="task.communityName"
              :value="task.communityId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="楼栋名称" prop="buildingName">
          <el-select v-model="ruleForm.buildingName" placeholder="请选择楼栋">
            <el-option
              v-for="task in unitList"
              :key="task.buildingId"
              :label="task.buildingName"
              :value="task.buildingId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="单元名称" prop="unitName">
          <el-input v-model.number="ruleForm.unitName" />
        </el-form-item>
        <el-form-item label-position="left" label-width="80%">
          <el-button @click="resetForm">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-card>
</template>

<script>
import { getunit, getbuildingName } from '@/api/paopao/unit'
import { getcommunityName } from '@/api/paopao/position'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showlouceng: false, // 弹出层
      taskList: [], // 下拉框数据
      unitList: [], // 二级下拉框
      formInline: {
        communityId: '',
        communityName: '',
        region1: '',
        region2: ''
      }, // 选择框
      ruleForm: {
        communityName: '', // 小区名称
        buildingName: '', // 楼栋名称
        unitName: '' // 单元名称
      },
      rules: {
        data: [
          { required: true, trigger: 'blur' }
        ],
        buildingName: [
          { required: true, trigger: 'blur' }
        ],
        unitName: [
          { required: true, message: '请输入单元名称', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getunit()
    this.getcommunityName()
    this.getbuildingName()
  },
  methods: {
    async getunit() {
      this.tableData = await getunit({
        pageIndex: 1, pageSize: 10
      })
    },
    // 获取下拉框的数据
    async getcommunityName() {
      this.taskList = await getcommunityName({
        id: 1
      })
    },
    async getbuildingName() {
      this.unitList = await getbuildingName({
        id: 1
      })
    },
    submitForm() {
      this.showlouceng = false
    },
    resetForm() {
      this.$emit('update:showDialog', false)
    }
  }
}
</script>

<style >
.box-show{
width: 100%;
}
</style>
